<template>
<div>
    <el-card class="table-container">
        <div class="bg">
            <div class="help-ipt wrap">
                <div class="info">{{ $t('pages.helpDetails.helpCenter') }}</div>
                <el-input
                    :placeholder="$t('pages.helpDetails.searchProblem')"
                    @keydown.native.13="getSearch"
                    v-model="searchInput">
                    <i slot="suffix" class="el-input__icon el-icon-search" @click="getSearch()"></i>
                </el-input>
            </div>
        </div>
    </el-card>
    <div class="wrap main" v-show="action === ''">
      <div class="left-help">
        <div class="proplem text-danger">{{ $t('pages.helpDetails.hotPro') }}</div>
        <ul>
          <li class="pro-list"
          :key="index"
          v-for="(item,index) in hotList"
          @click="goDetail(item.id)">
          {{item.name}}
          </li>
        </ul>
      </div>
      <div class="right-help">
        <div class="proplem text-danger">{{ $t('pages.helpDetails.newPro') }}</div>
        <ul>
          <li
            class="pro-list"
            :key="index"
            v-for="(item,index) in newList"
            @click="goDetail(item.id)">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <!-- table -->
    <div class="searTable"  v-show="action === 'search'">
      <el-table :data="dataList">
        <!-- id -->
          <el-table-column prop="id" label="ID">
          </el-table-column>
        <!-- 标题 -->
          <el-table-column prop="name" :label="$t('pages.help.col_title')">
          </el-table-column>
          <!-- 发布人 -->
          <el-table-column prop="updateUser" :label="$t('pages.help.col_publisher')">
          </el-table-column>
        <!-- 发布时间 -->
          <el-table-column
            label-class-name="text-center"
            prop="updateTime"
            :label="$t('pages.help.col_date')">
          </el-table-column>
          <!-- 详情 -->
          <el-table-column
            label-class-name="text-center"
            prop="updateTime"
            class-name="text-center action"
            :label="$t('pages.help.detail')">
            <template slot-scope="scope">
              <a class="text-info" @click.prevent='goDetail(scope.row.id)' href='/'>{{$t('pages.helpDetails.lookDetail')}}</a>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalPage">
        </el-pagination>
    </div>

    <!-- detail -->
    <div class="wrap" v-show="action === 'detail'">
      <div class="detail-title text-danger">{{ detailTitle }}</div>
      <div v-html="detailMain"></div>
    </div>
</div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      searchInput: "",
      action: this.$route.query.action || '',
      hotList: [{name: "如何注册？"}],
      newList: [{name: "如何注册？"}],
      //表格
      dataList: [{}],
      currentPage: 1,
      pageSize: 10,
      totalPage: 1,
      //详情
      detailTitle: '如何注册？',
      detailMain: '<p>详情</p>'
    };
  },
  watch: {
    '$route'(data){
      let {query} = data
      this.action = query.action ? query.action : ''
      if(query.action === ''|| !query.action) {
        this.defaltPro()
      } else if (query.action === 'search') {
        this.currentPage = parseInt(query.pageNo)
        this.searchInput = query.name
        this.getSearch()
      } else if(query.action === 'detail') {
        this.goDetail(query.id)
      }
    }
  },
  created() {
    this.defaltPro()
    /* let {query} = this.$route
    this.action = query.action ? query.action : ''
    if(query.action === ''|| !query.action) {
      this.defaltPro()
    } else if (query.action === 'search') {
      this.currentPage = parseInt(query.pageNo)
      this.searchInput = query.name
      this.getSearch()
    } else if(query.action === 'detail') {

      this.goDetail(query.id)
    }
     */
  },
  mounted() {
    // console.log(this.$route)
  },
  methods: {
    //默认初始请求
    defaltPro() {
      this.$router.push({
          path:'help',
          query: {}
        })
      ///product/cpqsystemhelp/querySysHelpEntityListR
      this.$http({
        url: this.$http.adornUrl('/prm-os-srv-help/product/cpqsystemhelp/querySysHelpEntityListR'),
        method: 'post',
        data: this.$http.adornData({})
      }).then( data => {
        let {sysHelpListR, sysHelpListJ} = data.data
        this.hotList = sysHelpListR
        this.newList = sysHelpListJ
        console.log(data)
      })
    },
    //查询
    getSearch() {
      if(!this.searchInput) {
        this.action = ''
        this.defaltPro()
      } else {
        let jsonData = {
          action: 'search',
          name: this.searchInput,
          pageNo: this.currentPage - 1,
          pageSize: this.pageSize
        }
        this.$router.push({
          path:'help',
          query: Object.assign({},jsonData,{pageNo:this.currentPage})
        })

        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-help/product/cpqsystemhelp/querySysHelpEntityList'),
          method: 'post',
          data: this.$http.adornData(jsonData)
        }).then( data => {
          let {list, totalCount} = data.page
          this.dataList = list
          this.totalPage = totalCount
          // console.log(data)
        })

        this.action = 'search'
        //请求
      }

    },
    //  去详情
    goDetail(id) {
      this.action = 'detail'
      this.$router.push({
        path:'help',
        query: {
          id: id,
          action: 'detail'
        }
      })
      this.$http({
        url: this.$http.adornUrl('/prm-os-srv-help/product/cpqsystemhelp/infoSysHelpEntity'),
        method: 'post',
        data: this.$http.adornData({id:id})
      }).then( data => {
        let {name, content} = data.cpqSystemHelp
        this.detailTitle = name
        this.detailMain = content
      })
    },

    handleCurrentChange() {}
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.wrap {
  width: 590px;
  margin: 0 auto;
}
.bg {
  background: #262526;
  width: 100%;
  height: 281px;
  display: flex;
  justify-content: center;
  align-items: center;
  .help-ipt {
    text-align: center;
    .info {
      color: #fff;
      font-size: 30px;
      position: relative;
      margin-bottom: 30px;
      &::after {
        content: "";
        position: absolute;
        left: -187px;
        right: 0px;
        margin: auto;
        width: 41px;
        height: 34px;
        background: url("../../../assets/img/icons/icon-help.png") no-repeat;
      }
    }
  }
  .el-icon-search{
      cursor: pointer;
  }
}
.main{
  display: flex;
  justify-content: center;
  align-items: center;
  .left-help, .right-help{
    width:50%;
    text-align: left;
    font-size: 18px;
    .pro-list{
      font-size: 16px;
      color:#636161;
      padding: 6px 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
    }
  }
  .proplem{
    padding: 40px 0 20px;
  }
}
/* detail */
.detail-title{
  font-size: 18px;
  padding: 36px 0;
}
</style>
